<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	body,ul,li,p{
		margin:0;
		padding:0;
	}

	li{
		list-style:none;
	}

	.big{
		width:1226px;
		height:460px;
		background-color:red;
		margin:0 auto;
		position:relative;
	}

	.big .beijing{
		position:absolute;
		width:1226px;
		height:460px;
		top:0;
		left:0;
	}
	.mianban{
		height:460px;
		width:234px;
		background-color:#9B5F63;
		position:absolute;
		top:0;
		left:0;
		opacity:0.8;
	}

	.big .mianban li{
		color:white;
		font-size:12px;
		width:234px;
		height:43px;
		line-height:43px;
		padding-left:20px;
		background-color:rgb(156, 116, 118);
		box-sizing:border-box;
	}

	.big .mianban li:hover{
		background-color:rgb(255, 103, 0);
	}


	.big .mianban span{
		float:right;
		padding-right:20px;
	}

	.big .mianban2 li:nth-of-type(5){
		width:10px;
		height:10px;
		background-color:transparent;
		position:absolute;
		bottom:0;
		right:10px;
		border-radius:100%;
		border:gray solid 2px;
		box-sizing:border-box;
	}

	.big .mianban2 li:nth-of-type(4){
		width:10px;
		height:10px;
		background-color:transparent;
		position:absolute;
		bottom:0;
		right:25px;
		border-radius:100%;
		border:gray solid 2px;
		box-sizing:border-box;
	}

	.big .mianban2 li:nth-of-type(3){
		width:10px;
		height:10px;
		background-color:transparent;
		position:absolute;
		bottom:0;
		right:40px;
		border-radius:100%;
		border:gray solid 2px;
		box-sizing:border-box;
	}

	.big .mianban2 li:nth-of-type(2){
		width:10px;
		height:10px;
		background-color:transparent;
		position:absolute;
		bottom:0;
		right:55px;
		border-radius:100%;
		border:gray solid 2px;
		box-sizing:border-box;
	}

	.big .mianban2 li:nth-of-type(1){
		width:10px;
		height:10px;
		background-color:transparent;
		position:absolute;
		bottom:0;
		right:70px;
		border-radius:100%;
		border:gray solid 2px;
		box-sizing:border-box;
	}

	.big .mianban2 li:hover{
		background-color:#D7717A;
	}

	.jiantou{
		width:41px;
		height:69px;
		position:absolute;
		overflow:hidden;
		right:0;
		top:50%;
		transform:translateY(-50%);
	}

	.jiantou2{
		width:41px;
		height:69px;
		position:absolute;
		overflow:hidden;
		left:234px;
		top:50%;
		transform:translateY(-50%);
	}

	.jiantou img{
		position:absolute;
		left:-124px;
		top:0;
	}

	.jiantou:hover img{
		position:absolute;
		left:-42px;
		top:0;
	}


	.jiantou2 img{
		position:absolute;
		left:-84px;
		top:0;
	}

	.jiantou2:hover img{
		position:absolute;
		left:0px;
		top:0;
	}

	.big .mianban div{
		position:absolute;
		background-color:white;
		width:1000px;
		height:100%;
		top:0;
		left:234px;
		display:none;
	}

	.big .mianban li:hover+div{
		display:block;
	}
</style>
<body>
	<div class="big">
		<img src="1.jpg" alt="图片" class="beijing">
		<ul class="mianban">
			<li class="one">手机 电话卡<span>&gt;</span></li>
			<div>1</div>
			<li>电视 盒子<span>&gt;</span></li>
			<div>2</div>
			<li>笔记本 显示器 平板<span>&gt;</span></li>
			<div>3</div>
			<li>家电 插线板<span>&gt;</span></li>
			<div>4</div>
			<li>出行 穿戴<span>&gt;</span></li>
			<div>5</div>
			<li>智能 路由器<span>&gt;</span></li>
			<div>6</div>
			<li>电源 配件<span>&gt;</span></li>
			<div>7</div>
			<li>健康 儿童<span>&gt;</span></li>
			<div>8</div>
			<li>耳机 音箱<span>&gt;</span></li>
			<div>9</div>
			<li class="two">生活 箱包<span>&gt;</span></li>
			<div>10</div>
		</ul>
		<ul class="mianban2">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<div class="jiantou">
			<img src="1.png" alt="图片">
		</div>
		<div class="jiantou2">
			<img src="1.png" alt="图片">
		</div>
	</div>
</body>
</html>